<template>
   <vue-drag-resize 
        :parentLimitation='true'
        :isActive='option.active'
        :z='option.zIndex'
        :w='option.width'
        :h='option.height'
        :x='option.left'
        :y='option.top'
        @resizing="resizeEvent"
        @activated='activatedEvent'
        @dragstop='dragstopEvent'
        :isDraggable='option.isDraggable'
        :isResizable='option.isResizable'
        >
        <component :is='type' :option='sizeOption' :echartOption='echartOption'></component>
    </vue-drag-resize>
</template>

<script>
import VueDragResize from 'vue-drag-resize' 
import EchartLine from './EchartLine.vue'
import EchartBar from './EchartBar.vue'
import DragImg from './DragImg.vue'
export default {
    name:'drag-resize',
    props:{
        type:{
            type:String,
            default:''
        },
        option:{
            type:Object,
        },
        echartOption:{
             type:Object
        }
    },
    components:{
        VueDragResize,
        EchartLine,
        EchartBar,
        DragImg
    },
    created(){
        
    },
    data() {
        return {
            activeView:'EchartLine',
            sizeOption:{
                w:250,
                h:250,
            },
            potionOption:{
                top:0,
                left:0,
            }
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
        resizeEvent(option){
            this.sizeOption.w = option.width
            this.sizeOption.h = option.height
            this.potionOption.top = option.top
            this.potionOption.left = option.left
            this.$emit('updateOption',option)
        },
        activatedEvent(){
             console.log('选中')
        },
        dragstopEvent(option){
            this.$emit('updateOption',option)
            console.log('拖拽结束')
        }
    }
};
</script>

<style scoped lang="less">
    .yun-drag-box{
        width:100%;
        height:100%;
        border:4px solid #999;
    }
</style>
